<!--
 * @Author: Mr · Lei
 * @Date: 2024-04-15 17:22:32
 * @LastEditors: OBKoro1
 * @LastEditTime: 2024-04-15 17:22:33
 * @FilePath: \kyushu-medical-aesthetics-pc\src\views\marketing\marketing-qing\components\addGoods.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by 四川开局红科技有限公司, All Rights Reserved. 
-->
<template>
  <div>
    <a-modal :visible="props.visible" width="50vw" @ok="handleOk" @cancel="handleCancel" @before-open="beforeOpen">
      <template #title> {{ $t('orderList.modal.title') }} </template>

      <a-table row-key="id" show-empty-tree :loading="loading"
        :columns="(cloneColumns as TableColumnData[])" :data="renderData" :bordered="{ wrapper: true, cell: true }">
        <template #images="{ record }">
          <a-image v-if="record.product" width="50" height="50" :src="record.product.images" />
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  defineProps,
  defineEmits,
  computed,
  watch,
} from 'vue';
import useLoading from '@/hooks/loading';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import { useI18n } from 'vue-i18n';
import cloneDeep from 'lodash/cloneDeep';

type Column = TableColumnData & { checked?: true };
const { t } = useI18n();
const { loading, setLoading } = useLoading(true);
// 表格尺寸
// type SizeProps = 'mini' | 'small' | 'medium' | 'large';
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  orderId: {
    type: Number,
    default: 0,
  },
});

const emits = defineEmits(['handleCancel']);
const handleCancel = () => {
  emits('handleCancel');
};
const handleOk = async () => {
  emits('handleCancel');
};

// 获取产品 列表
const renderData = ref([]);
const showColumns = ref<Column[]>([]);

// 分页属性

const cloneColumns = ref<Column[]>([]);
const columns = computed<TableColumnData[]>(() => [
  {
    title: t('orderList.columns.orderNo'),
    dataIndex: 'productOrder.order_no',
    align: 'center',
  },
  {
    title: t('orderList.columns.product.name'),
    dataIndex: 'product.name',
    align: 'center',
  },
  {
    title: t('orderList.columns.product.images'),
    dataIndex: 'product.images',
    slotName: 'images',
    align: 'center',
  },
  {
    title: t('orderList.columns.shop.name'),
    dataIndex: 'shop.name',
    align: 'center',
  },
  {
    title: t('orderList.columns.order_money'),
    dataIndex: 'pay_money',
    align: 'center',
  },
  {
    title: t('orderList.columns.return_money'),
    dataIndex: 'return_money',
    align: 'center',
  },
  {
    title: t('orderList.columns.createtime'),
    dataIndex: 'createtime',
    align: 'center',
  },
]);
const GetGoodsList = async () => {
  // setLoading(true);
  // try {
  //   const { data } = await GetQingOrderLogApi({ return_order_id: props.orderId });
  //   console.log('data::: ', data);

  //   renderData.value = data;
  // } catch (err) {
  //   console.log(err);
  //   // you can report use errorHandler or other
  // } finally {
  //   setLoading(false);
  // }
};

const search = () => {
  GetGoodsList();
};

const beforeOpen = () => {
  search();
};

watch(
  () => columns.value,
  (val) => {
    cloneColumns.value = cloneDeep(val);
    cloneColumns.value.forEach((item) => {
      item.checked = true;
    });
    showColumns.value = cloneDeep(cloneColumns.value);
  },
  { deep: true, immediate: true }
);
</script>

<style scoped></style>
